<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>公司风采</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加照片</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <table class="table" border="1" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>照片</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="teamLists.length == 0">
                        <td colspan="3" class="no-data">暂无数据</td>
                    </tr>
                    <tr v-for="(item, index) in teamLists" :key="index" v-else>
                        <td class="table-index">{{index+1}}</td>
                        <td><img :src="UPLOADURL + item" alt="" class="table-img"></td>
                        <td>
                            <el-button size="small" type="primary" @click="updateDatas(index)">修改</el-button>
                            <el-button size="small" type="danger" @click="deleteDatas(index)">删除</el-button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-row>
        <el-dialog :title="isAdd?'添加照片':'修改照片'" :visible.sync="showVideoDialog" size="tiny" @close="closeVideoDialog" class="dialog">
			    <el-form label-width="120px">
			        <el-form-item label="上传照片">
                        <el-upload class="avatar-uploader" :headers="uploadHeader" :action="BASEURL+'/upload/team'" :show-file-list="false" :on-success="handleAvatarSuccess">
                           <el-button size="small" type="primary" :loading="uploadLoading">上传</el-button>
                       </el-upload>
                        <div>
                            <img v-if="imgUrl" :src="UPLOADURL+imgUrl" alt="" class="banner-thumb">
                        </div>
			        </el-form-item>
			    </el-form>
                
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="cancelAddVideos">取 消</el-button>
		        <el-button type="primary" @click="addVideos" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
    </el-row>
</template>
<script>
import {
    getConfig,
    setConfig
} from '@/api/api'
export default {
    data: function() {
        return {
            isAdd: true,
            showVideoDialog: false,
            uploadLoading: false,
            addLoading: false,
            index: 0,
            teamLists: [],
            imgUrl: '',
            uploadHeader: {
                TOKEN: sessionStorage.getItem('jwt'),
                APPID: 1
            }
        }
    },
    created: function(){
		this.getVideoDatas();
    },
    methods:{
    	getVideoDatas: function(){
    		getConfig('companyView').then(res => {
    			console.log(JSON.parse(res.companyView))
                this.teamLists = JSON.parse(res.companyView)
    		})
    	},
    	showAddDialog: function(){
    		this.isAdd = true;
            this.showVideoDialog = true;
    	},
    	closeVideoDialog: function(){
    		this.isAdd = true;
            this.showVideoDialog = false;
            this.imgUrl = '';
    	},
    	updateDatas: function(index){
            this.imgUrl = this.teamLists[index]
            this.index = index;
    		this.isAdd = false;
    		this.showVideoDialog = true;
    	},
    	deleteDatas: function(index){
            this.$confirm('是否删除?', '删除照片', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                this.teamLists.splice(index, 1)
                this.addVideos()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
    	},
    	cancelAddVideos: function(){
    		this.closeVideoDialog()
    	},
    	addVideos: function(){
            setConfig({companyView: JSON.stringify(this.teamLists)}).then(res => {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                this.showVideoDialog = false;
            })
    	},
        handleAvatarSuccess: function(res){
            if(res.status){
                this.$message({
                    message: '上传头像成功',
                    type: 'success'
                })
                this.imgUrl = res.data.webPath;
                if(this.isAdd){
                    this.teamLists.push(res.data.webPath);                    
                }else{
                    this.$set(this.teamLists, this.index, res.data.webPath)
                }
            }else{
                this.$message({
                    message: '上传头像失败',
                    type: 'error'
                })
            }
        }
    }
}
</script>
<style scoped lang="scss">
	.lives-news {
	    .title {
	        font-size: 12px;
	        border-bottom: 1px solid #eaeaea;
	        margin-bottom: 5px;
	        h3 {
	            display: inline-block;
	            padding: 5px 0;
	            margin: 0;
	            font-weight: normal;
	            color: #23b7e5;
	            border-bottom: 1px solid #23b7e5;
	        }
	    }
        .banner-thumb{
            max-width: 100%;
        }
        table,table tr th, table tr td {
            border:1px solid #a5acb1;
        }
        .table{
            width: 100%;
            border-collapse: collapse;
        }
        table tr th{
            line-height: 40px;
            font-size: 20px;
        }
        .table td{
            text-align: center;
        }
        .table-index{
            font-size: 18px;
            font-weight: bold;
        }
        .table-img{
            max-width: 200px;
        }
        .no-data{
            font-size: 20px;
            padding: 30px 0;
        }
	}
</style>